import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail/Detail'

export default class Message extends Component {
    state = {
        messageArr: [
            { id: '01', title: '消息1' },
            { id: '02', title: '消息2' },
            { id: '03', title: '消息3' },
        ]
    }
    render() {
        const { messageArr } = this.state
        return (
            <div>
                <ul>
                    {
                        messageArr.map((msgObj) => {
                            return (
                                <li key={msgObj.id}>

                                    {/* 一、传递params参数 */}
                                    {/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> */}

                                    {/* 二、传递search参数（类似Ajax的query） */}
                                    {/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}

                                    {/* 三、传递state参数 */}
                                    <Link to={{ pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } }}>{msgObj.title}</Link>

                                </li>
                            )
                        })
                    }
                </ul>
                <hr></hr>

                {/* 声明params参数 */}
                {/* <Route path="/home/message/detail/:id/:title" component={Detail}></Route> */}

                {/* 声明search参数，无需声明接收 */}
                {/* <Route path="/home/message/detail" component={Detail}></Route> */}

                {/* 声明state参数，无需声明接收 */}
                <Route path="/home/message/detail" component={Detail}></Route>

            </div>
        )
    }
}
